<template>
  <div
    class="wrapper"
  >
    <!-- :eyeIcon="eyeIcon"   这个可以传入图标 -->
    <SketchRule
      :thick="state.thick"
      :scale="state.scale"
      :width="500"
      :height="500"
      :start-x="state.startX"
      :start-y="state.startY"
      :shadow="shadow"
      :is-show-refer-line="state.isShowReferLine"
      :lines="state.lines"
    >
    </SketchRule>
    <div
      id="screens"
      ref="screensRef"
      @wheel="handleWheel"
      @scroll="handleScroll"
    >
      <div
        ref="containerRef"
        class="screen-container"
      >
        <div
          id="canvas"
          :style="canvasStyle"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  computed,
  ref,
  reactive,
  onMounted,
  nextTick,
} from 'vue';
// 这里可以换成打包后的
const rectWidth = 500;
const rectHeight = 100;
const screensRef = ref<HTMLElement>();
const containerRef = ref<HTMLElement>();
const state = reactive({
  scale: 1, // 658813476562495, //1,
  startX: 0,
  startY: 0,
  lines: {
    h: [433, 588],
    v: [33, 143],
  },
  thick: 20,
  isShowRuler: true, // 显示标尺
  isShowReferLine: false, // 显示参考线
});
const palette = {
  bgColor: 'rgba(225,225,225, 0)',
  longfgColor: '#BABBBC',
  shortfgColor: '#C8CDD0',
  fontColor: '#7D8694',
  shadowColor: '#E8E8E8',
  lineColor: '#EB5648',
  borderColor: '#DADADC',
  cornerActiveColor: 'rgb(235, 86, 72, 0.6)',
};
const shadow = computed(() => ({
  x: 0,
  y: 0,
  width: rectWidth,
  height: rectHeight,
}));
const canvasStyle = computed(() => ({
  width: rectWidth,
  height: rectHeight,
  transform: `scale(${state.scale})`,
}));
onMounted(() => {
  // 滚动居中
  screensRef!.value!.scrollLeft = containerRef!.value!.getBoundingClientRect().width / 2 - 400;
});
const handleScroll = () => {
  const screensRect = document.querySelector('#screens')!.getBoundingClientRect();
  const canvasRect = document.querySelector('#canvas')!.getBoundingClientRect();
  // 标尺开始的刻度
  const startX = (screensRect.left + state.thick - canvasRect.left) / state.scale;
  const startY = (screensRect.top + state.thick - canvasRect.top) / state.scale;
  state.startX = startX;
  state.startY = startY;
};
// 控制缩放值
const handleWheel = (e: {
  ctrlKey: any
  metaKey: any
  preventDefault: () => void
  deltaY: number
}) => {
  if (e.ctrlKey || e.metaKey) {
    e.preventDefault();
    const nextScale = parseFloat(
      Math.max(0.2, state.scale - e.deltaY / 500).toFixed(2),
    );
    state.scale = nextScale;
  }
  nextTick(() => {
    handleScroll();
  });
};
// const showLineClick = () => {
//   state.isShowReferLine = !state.isShowReferLine;
// };
</script>
<style lang="scss">
.top {
  position: absolute;
  right: 100px;
  font-size: 20px;
}
.right {
  top: 200px;
  position: absolute;
  right: 100px;
  font-size: 20px;
}
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}
body * {
  box-sizing: border-box;
  user-select: none;
}
.wrapper {
  top: 100px;
  left: 240px;
  /* 特别注意,这个width要和传入组件的width成对应关系,
   也就是 780width +thick20 =800
   否则影子不和容器搭配,这个在2X中会进行自动匹配修正,省得配置麻烦
    */
  width: 1920px;
  height: 1080px;
  background: url(https://img.alicdn.com/tfs/TB184VLcPfguuRjSspkXXXchpXa-14-14.png) repeat;;
  border: 1px solid #7a8894;
}
#screens {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.screen-container {
  position: absolute;
  width: 1500px;
  height: 100%;
}
.scale-value {
  position: absolute;
  bottom: 100%;
  left: 0;
}
.button {
  position: absolute;
  bottom: 100%;
  left: 100px;
}
#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  width: 600px;
  height: 320px;
  background: url('../assets/bg.jfif') no-repeat;
  background-size: 100% 100%;
  transform-origin: 50% 0;
}
</style>
